<!--
 * @Description:
 * @Author: Ronda
 * @Date: 2021-06-24 23:56:19
 * @LastEditors: Ronda
 * @LastEditTime: 2021-06-27 09:38:11
-->
<template>
  <!-- 订单详情页 -->
  <div>
    <div>
      <el-button type="text" style="font-size: 14px" @click="$router.go(-1)">返回</el-button>
    </div>
    <!-- {{ListData}} -->
    <!-- 订单的表格信息 -->
    <el-table :data="DetailsData" style="width: 100%">
      <el-table-column prop="id" label="订单号" width="220" align="center" />
      <el-table-column prop="orderId" label="编号" width="180" align="center" />
      <el-table-column
        prop="product.name"
        label="名称"
        align="center"
        width="250"
      />
      <el-table-column
        prop="product.photo"
        label="图片"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <!-- <img :src="scope.row.product.photo" alt="加载失败" width="50px" height="50px"> -->
          <!-- 预览效果 -->
          <el-popover trigger="hover" placement="right">
            <img
              slot="reference"
              fit="contain"
              width="50px"
              height="50px"
              :src="scope.row.product.photo || ''"
              alt="加载失败"
            >
            <img
              width="200px"
              height="200px"
              fit="contain"
              :src="scope.row.product.photo || ''"
              alt="加载失败"
            >
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" width="180" align="center" />
      <el-table-column prop="number" label="数量" align="center" />
    </el-table>
    <!-- 订单的表格信息 -->

    <!-- 卡表区域 -->
    <el-row :gutter="20" style="margin-top:50px">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <!-- 订单的其他信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>关于订单</span>
            </div>
            <div>
              <p>订单编号:{{ orderData.id }}</p>
              <p>订单金额：{{ orderData.total + 'RMB' }}</p>
              <p>下单时间：{{ orderData.orderTime | fmtDate() }}</p>
              <p>订单状态：{{ orderData.status }}</p>
            </div>
          </el-card>
          <!-- 订单的其他信息 -->
        </div>
      </el-col>
      <el-col :span="6">
        <div v-show="employeeData !==''" class="grid-content bg-purple">
          <!-- 接单者信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>关于接单</span>
            </div>
            <div>
              <p>姓名:{{ employeeData.username }}</p>
              <p>手机号：{{ employeeData.telephone }}</p>
            </div>
          </el-card>
          <!-- 接单者的基本信息 -->
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <!-- 下单的基本信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>关于下单</span>
            </div>
            <div>
              <p>姓名:{{ customerData.username }}</p>
              <p>手机号：{{ customerData.telephone }}</p>
            </div>
          </el-card>
          <!-- 下单的基本信息 -->
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <!-- 雇主的其他信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>关于雇主</span>
            </div>
            <div class="body">
              <p>名字:{{ addressData.username }}</p>
              <p>手机：{{ addressData.telephone }}</p>
              <p>服务地址：{{ addressData.city + addressData.address }}</p>
            </div>
          </el-card>
          <!-- 雇主的其他信息 -->
        </div>
      </el-col>
    </el-row>
    <!-- 卡表区域 -->
  </div>
</template>

<script>
import { queryDeatils } from '@/api/order'

// import {get,post} from '@/utils/request'
export default {
  data() {
    return {
      // 订单的详情
      DetailsData: [],
      // 该订单的详细信息
      orderData: [],
      // 接单者信息
      employeeData: [],
      // 下单人详细信息
      customerData: [],
      // 雇主信息
      addressData: [],
      // 该订单的id
      id: this.$route.query.id
    }
  },
  computed: {},
  created() {
    /* this.$route.query.index是订单页传递的id值，需要发送请求，获取订单的详情数据，设置到数据模型中，然后vue视图中使用这些数据。 */
    // 获取路由传递过来的参数
    // alert(this.$route.query.id);
    this.getDetail()
  },
  mounted() {},
  methods: {
    // 处理折叠面板的事件
    handleChange(val) {
      console.log(val)
    },
    // 通过id查询订单详情
    async getDetail() {
      console.log(this.id, 'idid')
      const res = await queryDeatils({ id: this.id })
      console.log(res, 'kkk')
      this.DetailsData = res.data.orderLines
      this.orderData = res.data
      this.employeeData = res.data.employee
      this.customerData = res.data.customer
      this.addressData = res.data.address
    }
  }
}
</script>
<style lang="scss">

</style>
